<template>
	<view class="navigation-container">
		<!-- 顶部搜索栏 -->
		<view class="search-bar">
			<view class="search-input-wrapper">
				<text class="iconfont icon-search"></text>
				<input
					class="search-input"
					type="text"
					placeholder="搜索科室、房间号..."
					v-model="searchKeyword"
					@input="onSearchInput"
					@confirm="onSearchConfirm"
				/>
				<text class="iconfont icon-clear" v-if="searchKeyword" @click="clearSearch"></text>
			</view>
			<view class="search-cancel" @click="closeSearch" v-if="showSearchResults">取消</view>
		</view>

		<!-- 搜索结果 -->
		<view class="search-results" v-if="showSearchResults">
			<view class="search-results-list">
				<view class="search-item" v-for="poi in searchResults" :key="poi.id" @click="selectPoi(poi)">
					<view class="poi-icon">
						<text class="iconfont" :class="getPoiIcon(poi.type)"></text>
					</view>
					<view class="poi-info">
						<view class="poi-name">{{ poi.name }}</view>
						<view class="poi-desc">{{ poi.description }}</view>
						<view class="poi-location">{{ poi.level }} · {{ poi.building }}</view>
					</view>
					<view class="poi-distance" v-if="poi.distance">{{ poi.distance }}m</view>
				</view>
			</view>
			<view class="empty-results" v-if="searchResults.length === 0 && searchKeyword">
				<text class="iconfont icon-search"></text>
				<text class="empty-text">未找到相关地点</text>
			</view>
		</view>

		<!-- 地图容器 -->
		<view class="map-container" v-show="!showSearchResults">
			<!-- 楼层切换器 -->
			<view class="level-switcher">
				<view 
					class="level-tab" 
					v-for="level in availableLevels" 
					:key="level.id"
					:class="{ 'active': level.id === currentLevel }"
					@click="switchLevel(level.id)"
				>
					{{ level.name }}
				</view>
			</view>

			<!-- 地图组件 -->
			<map
				id="hospital-map"
				class="map"
				:longitude="mapCenter.longitude"
				:latitude="mapCenter.latitude"
				:scale="mapScale"
				:markers="mapMarkers"
				:polyline="routePolyline"
				:include-points="includePoints"
				@markertap="onMarkerTap"
				@tap="onMapTap"
				@regionchange="onRegionChange"
			>
				<!-- 地图控制按钮 -->
				<cover-view class="map-controls">
					<cover-view class="control-btn" @click="centerToUser">
						<cover-image src="/static/icons/location.png" class="control-icon"></cover-image>
					</cover-view>
					<cover-view class="control-btn" @click="toggleHeatmap">
						<cover-image 
							:src="heatmapVisible ? '/static/icons/heatmap-on.png' : '/static/icons/heatmap-off.png'" 
							class="control-icon"
						></cover-image>
					</cover-view>
				</cover-view>
			</map>

			<!-- 路径信息面板 -->
			<view class="route-panel" v-if="routeInfo.visible">
				<view class="route-header">
					<view class="route-title">路径指引</view>
					<view class="route-close" @click="clearRoute">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="route-content">
					<view class="route-summary">
						<view class="route-distance">{{ routeInfo.distance }}m</view>
						<view class="route-time">预计 {{ routeInfo.eta }} 分钟</view>
						<view class="route-mode" :class="routeInfo.mode">
							{{ routeInfo.mode === 'emergency' ? '应急路线' : '推荐路线' }}
						</view>
					</view>
					<view class="route-steps">
						<view class="step-item" v-for="(step, index) in routeInfo.steps" :key="index">
							<view class="step-icon">
								<text class="iconfont" :class="step.icon"></text>
							</view>
							<view class="step-text">{{ step.instruction }}</view>
							<view class="step-distance">{{ step.distance }}m</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部功能按钮 -->
			<view class="bottom-actions">
				<view class="action-btn primary" @click="showRoutePlan">
					<text class="iconfont icon-route"></text>
					<text class="action-text">路径规划</text>
				</view>
				<view class="action-btn emergency" @click="showEmergencyRoute">
					<text class="iconfont icon-emergency"></text>
					<text class="action-text">应急疏散</text>
				</view>
				<view class="action-btn" @click="shareLocation">
					<text class="iconfont icon-share"></text>
					<text class="action-text">位置分享</text>
				</view>
			</view>
		</view>

		<!-- 路径规划弹窗 -->
		<uni-popup ref="routePlanPopup" type="bottom">
			<view class="route-plan-panel">
				<view class="panel-header">
					<view class="panel-title">路径规划</view>
					<view class="panel-close" @click="closeRoutePlan">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="panel-content">
					<view class="location-item">
						<view class="location-label">起点</view>
						<view class="location-input" @click="selectStartPoint">
							<text class="location-text" v-if="routePlan.start">{{ routePlan.start.name }}</text>
							<text class="location-placeholder" v-else>请选择起点</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="location-swap" @click="swapLocations">
						<text class="iconfont icon-swap"></text>
					</view>
					<view class="location-item">
						<view class="location-label">终点</view>
						<view class="location-input" @click="selectEndPoint">
							<text class="location-text" v-if="routePlan.end">{{ routePlan.end.name }}</text>
							<text class="location-placeholder" v-else>请选择终点</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="route-options">
						<view class="option-item" v-for="option in routeOptions" :key="option.type" @click="selectRouteOption(option.type)" :class="{ 'active': routePlan.mode === option.type }">
							<text class="iconfont" :class="option.icon"></text>
							<text class="option-text">{{ option.label }}</text>
						</view>
					</view>
					<view class="panel-actions">
						<button class="btn-secondary" @click="closeRoutePlan">取消</button>
						<button class="btn-primary" @click="planRoute" :disabled="!canPlanRoute">开始导航</button>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- POI详情弹窗 -->
		<uni-popup ref="poiDetailPopup" type="bottom">
			<view class="poi-detail-panel" v-if="selectedPoi">
				<view class="poi-detail-header">
					<view class="poi-detail-info">
						<view class="poi-detail-name">{{ selectedPoi.name }}</view>
						<view class="poi-detail-desc">{{ selectedPoi.description }}</view>
						<view class="poi-detail-location">{{ selectedPoi.level }} · {{ selectedPoi.building }}</view>
					</view>
					<view class="poi-detail-close" @click="closePoiDetail">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="poi-detail-actions">
					<button class="btn-outline" @click="routeToHere">到这里去</button>
					<button class="btn-primary" @click="sharePoiLocation">分享位置</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
	name: 'NavigationPage',
	data() {
		return {
			searchKeyword: '',
			showSearchResults: false,
			searchResults: [],
			searchTimer: null,
			mapCenter: {
				longitude: 116.397428,
				latitude: 39.90923
			},
			mapScale: 18,
			mapMarkers: [],
			routePolyline: [],
			includePoints: [],
			heatmapVisible: false,
			routeInfo: {
				visible: false,
				distance: 0,
				eta: 0,
				mode: 'normal',
				steps: []
			},
			routePlan: {
				start: null,
				end: null,
				mode: 'normal'
			},
			selectedPoi: null,
			routeOptions: [
				{
					type: 'normal',
					label: '推荐路线',
					icon: 'icon-route'
				},
				{
					type: 'accessible',
					label: '无障碍通道',
					icon: 'icon-accessible'
				},
				{
					type: 'emergency',
					label: '应急路线',
					icon: 'icon-emergency'
				}
			]
		}
	},
	computed: {
		...mapState('app', ['currentLevel', 'userLocation']),
		...mapState('navigation', ['availableLevels', 'poisList']),
		canPlanRoute() {
			return this.routePlan.start && this.routePlan.end
		}
	},
	onLoad() {
		this.initNavigation()
	},
	onShow() {
		this.refreshMapData()
	},
	onUnload() {
		this.clearSearchTimer()
	},
	methods: {
		...mapActions('navigation', ['loadPoisList', 'searchPois', 'planRouteApi', 'loadMapData']),
		...mapActions('app', ['setCurrentLevel', 'getUserLocation']),

		async initNavigation() {
			await this.getUserLocation()
			await this.loadPoisList()
			this.updateMapCenter()
			this.loadMapMarkers()
		},

		async refreshMapData() {
			await this.loadMapData(this.currentLevel)
			this.loadMapMarkers()
		},

		updateMapCenter() {
			if (this.userLocation) {
				this.mapCenter = {
					longitude: this.userLocation.longitude,
					latitude: this.userLocation.latitude
				}
			}
		},

		loadMapMarkers() {
			this.mapMarkers = this.poisList.map(poi => ({
				id: poi.id,
				longitude: poi.longitude,
				latitude: poi.latitude,
				iconPath: this.getPoiMarkerIcon(poi.type),
				width: 30,
				height: 30,
				title: poi.name,
				callout: {
					content: poi.name,
					fontSize: 14,
					borderRadius: 8,
					bgColor: '#ffffff',
					padding: 8
				}
			}))
		},

		// 搜索相关方法
		onSearchInput() {
			this.clearSearchTimer()
			this.searchTimer = setTimeout(() => {
				this.performSearch()
			}, 300)
		},

		onSearchConfirm() {
			this.performSearch()
		},

		async performSearch() {
			if (!this.searchKeyword.trim()) {
				this.showSearchResults = false
				return
			}

			this.showSearchResults = true
			try {
				this.searchResults = await this.searchPois({
					keyword: this.searchKeyword,
					level: this.currentLevel
				})
			} catch (error) {
				console.error('搜索失败:', error)
				this.searchResults = []
			}
		},

		clearSearch() {
			this.searchKeyword = ''
			this.showSearchResults = false
			this.searchResults = []
		},

		closeSearch() {
			this.showSearchResults = false
		},

		clearSearchTimer() {
			if (this.searchTimer) {
				clearTimeout(this.searchTimer)
				this.searchTimer = null
			}
		},

		// 地图交互方法
		async switchLevel(levelId) {
			await this.setCurrentLevel(levelId)
			this.refreshMapData()
		},

		onMarkerTap(e) {
			const markerId = e.detail.markerId
			const poi = this.poisList.find(p => p.id === markerId)
			if (poi) {
				this.showPoiDetail(poi)
			}
		},

		onMapTap(e) {
			// 地图点击事件
			console.log('地图点击:', e.detail)
		},

		onRegionChange(e) {
			if (e.type === 'end') {
				this.mapCenter = {
					longitude: e.detail.centerLocation.longitude,
					latitude: e.detail.centerLocation.latitude
				}
				this.mapScale = e.detail.scale
			}
		},

		centerToUser() {
			if (this.userLocation) {
				this.mapCenter = {
					longitude: this.userLocation.longitude,
					latitude: this.userLocation.latitude
				}
				this.mapScale = 18
			} else {
				uni.showToast({
					title: '获取位置失败',
					icon: 'none'
				})
			}
		},

		toggleHeatmap() {
			this.heatmapVisible = !this.heatmapVisible
			// TODO: 实现热力图显示/隐藏逻辑
		},

		// POI相关方法
		selectPoi(poi) {
			this.showPoiDetail(poi)
			this.closeSearch()
		},

		showPoiDetail(poi) {
			this.selectedPoi = poi
			this.$refs.poiDetailPopup.open()
		},

		closePoiDetail() {
			this.$refs.poiDetailPopup.close()
		},

		routeToHere() {
			this.routePlan.end = this.selectedPoi
			this.closePoiDetail()
			this.showRoutePlan()
		},

		sharePoiLocation() {
			// TODO: 实现位置分享功能
			uni.showToast({
				title: '位置已复制',
				icon: 'success'
			})
		},

		// 路径规划方法
		showRoutePlan() {
			this.$refs.routePlanPopup.open()
		},

		closeRoutePlan() {
			this.$refs.routePlanPopup.close()
		},

		selectStartPoint() {
			// TODO: 实现起点选择
			uni.showToast({
				title: '请在地图上点击选择起点',
				icon: 'none'
			})
		},

		selectEndPoint() {
			// TODO: 实现终点选择
			uni.showToast({
				title: '请在地图上点击选择终点',
				icon: 'none'
			})
		},

		swapLocations() {
			const temp = this.routePlan.start
			this.routePlan.start = this.routePlan.end
			this.routePlan.end = temp
		},

		selectRouteOption(type) {
			this.routePlan.mode = type
		},

		async planRoute() {
			if (!this.canPlanRoute) return

			try {
				uni.showLoading({ title: '规划路径中...' })
				
				const result = await this.planRouteApi({
					start: this.routePlan.start,
					end: this.routePlan.end,
					mode: this.routePlan.mode,
					level: this.currentLevel
				})

				this.displayRoute(result)
				this.closeRoutePlan()
				
				uni.hideLoading()
				uni.showToast({
					title: '路径规划成功',
					icon: 'success'
				})
			} catch (error) {
				uni.hideLoading()
				uni.showToast({
					title: '路径规划失败',
					icon: 'none'
				})
			}
		},

		displayRoute(routeResult) {
			this.routeInfo = {
				visible: true,
				distance: routeResult.distance,
				eta: routeResult.eta,
				mode: routeResult.mode,
				steps: routeResult.steps
			}

			this.routePolyline = [{
				points: routeResult.path.map(point => ({
					longitude: point.longitude,
					latitude: point.latitude
				})),
				color: routeResult.mode === 'emergency' ? '#FF3B30' : '#007AFF',
				width: 6,
				arrowLine: true
			}]

			this.includePoints = routeResult.path
		},

		clearRoute() {
			this.routeInfo.visible = false
			this.routePolyline = []
			this.includePoints = []
		},

		showEmergencyRoute() {
			this.routePlan.mode = 'emergency'
			this.showRoutePlan()
		},

		shareLocation() {
			// TODO: 实现位置分享功能
			uni.showToast({
				title: '位置已分享',
				icon: 'success'
			})
		},

		// 工具方法
		getPoiIcon(type) {
			const icons = {
				'clinic': 'icon-clinic',
				'pharmacy': 'icon-pharmacy',
				'elevator': 'icon-elevator',
				'stairs': 'icon-stairs',
				'toilet': 'icon-toilet',
				'exit': 'icon-exit',
				'emergency': 'icon-emergency'
			}
			return icons[type] || 'icon-location'
		},

		getPoiMarkerIcon(type) {
			const icons = {
				'clinic': '/static/markers/clinic.png',
				'pharmacy': '/static/markers/pharmacy.png',
				'elevator': '/static/markers/elevator.png',
				'stairs': '/static/markers/stairs.png',
				'toilet': '/static/markers/toilet.png',
				'exit': '/static/markers/exit.png',
				'emergency': '/static/markers/emergency.png'
			}
			return icons[type] || '/static/markers/default.png'
		}
	}
}
</script>

<style lang="scss" scoped>
.navigation-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f8f9fa;
}

.search-bar {
	display: flex;
	align-items: center;
	padding: 24rpx;
	background: white;
	border-bottom: 1rpx solid #f0f0f0;
	
	.search-input-wrapper {
		flex: 1;
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 24rpx;
		padding: 16rpx 24rpx;
		gap: 16rpx;
		
		.icon-search {
			color: #999;
			font-size: 28rpx;
		}
		
		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}
		
		.icon-clear {
			color: #999;
			font-size: 28rpx;
		}
	}
	
	.search-cancel {
		margin-left: 24rpx;
		color: #007AFF;
		font-size: 28rpx;
	}
}

.search-results {
	flex: 1;
	background: white;
	
	.search-results-list {
		padding: 0 24rpx;
	}
	
	.search-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		gap: 24rpx;
		
		&:last-child {
			border-bottom: none;
		}
		
		.poi-icon {
			width: 64rpx;
			height: 64rpx;
			border-radius: 12rpx;
			background: #007AFF;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 28rpx;
		}
		
		.poi-info {
			flex: 1;
			
			.poi-name {
				font-size: 28rpx;
				color: #1a1a1a;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.poi-desc {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 4rpx;
			}
			
			.poi-location {
				font-size: 20rpx;
				color: #999;
			}
		}
		
		.poi-distance {
			font-size: 24rpx;
			color: #007AFF;
		}
	}
	
	.empty-results {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 48rpx;
		
		.iconfont {
			font-size: 96rpx;
			color: #ddd;
			margin-bottom: 24rpx;
		}
		
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
}

.map-container {
	flex: 1;
	position: relative;
	
	.level-switcher {
		position: absolute;
		top: 24rpx;
		left: 24rpx;
		right: 24rpx;
		z-index: 10;
		display: flex;
		background: white;
		border-radius: 16rpx;
		padding: 8rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		
		.level-tab {
			flex: 1;
			text-align: center;
			padding: 16rpx;
			font-size: 24rpx;
			color: #666;
			border-radius: 8rpx;
			transition: all 0.3s;
			
			&.active {
				background: #007AFF;
				color: white;
			}
		}
	}
	
	.map {
		width: 100%;
		height: 100%;
	}
	
	.map-controls {
		position: absolute;
		right: 24rpx;
		bottom: 200rpx;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		
		.control-btn {
			width: 80rpx;
			height: 80rpx;
			background: white;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			
			.control-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	
	.route-panel {
		position: absolute;
		left: 24rpx;
		right: 24rpx;
		bottom: 200rpx;
		background: white;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		
		.route-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			.route-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #1a1a1a;
			}
			
			.route-close {
				color: #666;
				font-size: 32rpx;
			}
		}
		
		.route-content {
			padding: 24rpx;
			
			.route-summary {
				display: flex;
				align-items: center;
				gap: 24rpx;
				margin-bottom: 24rpx;
				
				.route-distance {
					font-size: 32rpx;
					font-weight: 600;
					color: #1a1a1a;
				}
				
				.route-time {
					font-size: 24rpx;
					color: #666;
				}
				
				.route-mode {
					padding: 8rpx 16rpx;
					border-radius: 12rpx;
					font-size: 20rpx;
					color: white;
					
					&.normal {
						background: #007AFF;
					}
					
					&.emergency {
						background: #FF3B30;
					}
				}
			}
			
			.route-steps {
				max-height: 300rpx;
				overflow-y: auto;
				
				.step-item {
					display: flex;
					align-items: center;
					gap: 16rpx;
					padding: 16rpx 0;
					border-bottom: 1rpx solid #f0f0f0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.step-icon {
						width: 32rpx;
						text-align: center;
						color: #007AFF;
						font-size: 24rpx;
					}
					
					.step-text {
						flex: 1;
						font-size: 24rpx;
						color: #333;
					}
					
					.step-distance {
						font-size: 20rpx;
						color: #999;
					}
				}
			}
		}
	}
	
	.bottom-actions {
		position: absolute;
		left: 24rpx;
		right: 24rpx;
		bottom: 48rpx;
		display: flex;
		gap: 16rpx;
		
		.action-btn {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8rpx;
			padding: 24rpx 16rpx;
			background: white;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			
			&.primary {
				background: #007AFF;
				color: white;
			}
			
			&.emergency {
				background: #FF3B30;
				color: white;
			}
			
			.iconfont {
				font-size: 32rpx;
			}
			
			.action-text {
				font-size: 20rpx;
			}
		}
	}
}

.route-plan-panel {
	background: white;
	border-radius: 24rpx 24rpx 0 0;
	
	.panel-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.panel-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #1a1a1a;
		}
		
		.panel-close {
			color: #666;
			font-size: 32rpx;
		}
	}
	
	.panel-content {
		padding: 32rpx;
		
		.location-item {
			margin-bottom: 24rpx;
			
			.location-label {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 16rpx;
			}
			
			.location-input {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx;
				background: #f8f9fa;
				border-radius: 16rpx;
				
				.location-text {
					font-size: 28rpx;
					color: #1a1a1a;
				}
				
				.location-placeholder {
					font-size: 28rpx;
					color: #999;
				}
				
				.iconfont {
					color: #007AFF;
					font-size: 24rpx;
				}
			}
		}
		
		.location-swap {
			display: flex;
			justify-content: center;
			margin: 16rpx 0;
			
			.iconfont {
				font-size: 32rpx;
				color: #007AFF;
				transform: rotate(90deg);
			}
		}
		
		.route-options {
			display: flex;
			gap: 16rpx;
			margin: 32rpx 0;
			
			.option-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12rpx;
				padding: 24rpx 16rpx;
				border: 2rpx solid #f0f0f0;
				border-radius: 16rpx;
				
				&.active {
					border-color: #007AFF;
					background: #f0f9ff;
					
					.option-text {
						color: #007AFF;
					}
					
					.iconfont {
						color: #007AFF;
					}
				}
				
				.iconfont {
					font-size: 32rpx;
					color: #666;
				}
				
				.option-text {
					font-size: 20rpx;
					color: #666;
				}
			}
		}
		
		.panel-actions {
			display: flex;
			gap: 16rpx;
			margin-top: 32rpx;
			
			.btn-secondary {
				flex: 1;
				padding: 24rpx;
				background: #f8f9fa;
				color: #666;
				border: none;
				border-radius: 16rpx;
				font-size: 28rpx;
			}
			
			.btn-primary {
				flex: 2;
				padding: 24rpx;
				background: #007AFF;
				color: white;
				border: none;
				border-radius: 16rpx;
				font-size: 28rpx;
				
				&:disabled {
					background: #ddd;
					color: #999;
				}
			}
		}
	}
}

.poi-detail-panel {
	background: white;
	border-radius: 24rpx 24rpx 0 0;
	
	.poi-detail-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.poi-detail-info {
			flex: 1;
			
			.poi-detail-name {
				font-size: 36rpx;
				font-weight: 600;
				color: #1a1a1a;
				margin-bottom: 12rpx;
			}
			
			.poi-detail-desc {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 8rpx;
			}
			
			.poi-detail-location {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.poi-detail-close {
			color: #666;
			font-size: 32rpx;
		}
	}
	
	.poi-detail-actions {
		display: flex;
		gap: 16rpx;
		padding: 32rpx;
		
		.btn-outline {
			flex: 1;
			padding: 24rpx;
			background: transparent;
			color: #007AFF;
			border: 2rpx solid #007AFF;
			border-radius: 16rpx;
			font-size: 28rpx;
		}
		
		.btn-primary {
			flex: 1;
			padding: 24rpx;
			background: #007AFF;
			color: white;
			border: none;
			border-radius: 16rpx;
			font-size: 28rpx;
		}
	}
}
</style> 